<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* .container{
			   display: grid;
			   grid-template-columns: repeat(auto-fit, 200px);
			   grid-template-rows: auto auto;
			   place-items: center center;
			} */
			/* .container{
			   display: grid;
			   grid-template-columns: repeat(auto-fit, 200px);
			   grid-template-rows: auto auto;
			   grid-row-gap: 20px;
			   grid-column-gap: 10px;
			} */
			/* .container {
			  display: grid;
			  width: 100%;
			  height: 200px;
			  grid-template: [header-left] "head head" 30px [header-right]
			                 [main-left]   "nav  main" 1fr  [main-right]
			                 [footer-left] "nav  foot" 30px [footer-right]
			                 / 120px 1fr;
			} */
			.container{
			    grid-template-columns: 40px 50px auto 50px 40px;
			    grid-template-rows: 25% 100px auto;
			    grid-template-areas:
			      'a a a b b'
			      'c c d . e'
			      'c c d . e';
			}
			/* .container{
			    grid-template-columns: [c1 r1] 40px [c2] 50px [c3] auto [c4] 50px [c5] 40px;
			    grid-template-rows: 25% 100px auto;
			} */
			.container div{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="container">
		  <div class="item">1</div>
		  <div class="item">2</div>
		  <div class="item">3</div>
		  <div class="item">4</div>
		  <div class="item">5</div>
		  <div class="item">6</div>
		  <div class="item">7</div>
		  <div class="item">8</div>
		  <div class="item">9</div>
		  <div class="item">10</div>
		</div>
	</body>
</html>